<template>
  <div class="me-box">
    <div class="headerb">
      <p>我的</p>
    </div>
    <div class="login">
      <div class="left" @click="dl">
        <!-- <router-link to="/Denglu"> -->
        <p class="title" :v-model="ljdl">{{ ljdl }}</p>
        <!-- <input type="password" @focus="iuserpass" v-model="userpass" /> -->
        <!-- </router-link> -->
        <p class="dian">增加个性签名，在人群中你的闪光点</p>
        <ul>
          <li>{{this.tedian.tedian1}}</li>
          <li>{{this.tedian.tedian2}}</li>
          <li>{{this.tedian.tedian3}}</li>
        </ul>
      </div>
      <div class="right">
        <router-link to="/Grxx">
          <img :src="this.tedian.imgs1" alt="" />
        </router-link>
      </div>
    </div>
    <div class="jianli">
      <img :src="this.tedian.imgs2" alt="" />
    </div>
    <!-- 我的报名 -->
    <div class="baom">
      <div class="top">
        <p class="title">我的报名</p>
        <span></span>
      </div>
      <ul>
        <li v-for="item in baoming" :key="item.id">
          <img :src="item.imgss" alt="" />
          <p>{{item.name}}</p>
        </li>
        <!-- <li>
          <img src="../assets/img/tu2.png" alt="" />
          <p>已录取</p>
        </li>
        <li>
          <img src="../assets/img/tu3.png" alt="" />
          <p>已完成</p>
        </li> -->
      </ul>
    </div>

    <div class="list">
      <ul>
        <li>
          <a href="#">
            <span class="title">我的收藏</span>
            <span class="iconfont icon-xuanzeqixiayige"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">商务合作</span>
            <span class="iconfont icon-xuanzeqixiayige"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">投诉反馈</span>
            <span class="iconfont icon-xuanzeqixiayige"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">关于我们</span>
            <span class="iconfont icon-xuanzeqixiayige"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">违规账号处理公告</span>
            <span class="iconfont icon-xuanzeqixiayige"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">资质公式</span>
            <span class="iconfont icon-xuanzeqixiayige"></span>
          </a>
        </li>
        <li>
          <a href="#">
            <span class="title">系统设置</span>
            <span class="iconfont icon-xuanzeqixiayige"></span>
          </a>
        </li>
      </ul>
    </div>

    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../components/Footer.vue";
import axios from "axios";

export default {
  name: "Me",
  components: {
    Footer,
  },
  data() {
    return {
      ljdl: "立即登录",
      baoming:[],
      tedian:[]
    };
  },
  created() {
    axios({
      method:'get',
      url: "http://localhost:3000/baoming",
      
    }).then(res=>{
      this.baoming=res.data;
    });
    axios({
      method:'get',
      url: "http://localhost:3000/tedian",
     
    }).then(res=>{
      this.tedian=res.data;
      // console.log(this.tedian);
    })

    if (localStorage.getItem("token")) {
      this.ljdl = "用户" + localStorage.getItem("token");
      // this.dl = "/Grxx";
    } else {
      return;
    }
  },
  methods: {
    dl() {
      // dla = this.dla;
      if (localStorage.getItem("token")) {
        this.$router.push("/Grxx");
        // this.dl = "/Grxx";
      } else {
        this.$router.push("/Denglu");
        return;
      }
    },
  },
};
</script>

<style scoped>
.headerb {
  font-size: 0.22rem;
  margin: 0.2rem 0.18rem;
}
.login {
  margin-left: 0.18rem;
  margin-right: 0.2rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.login .left .title {
  font-size: 0.24rem;
  font-weight: 600;
  margin-bottom: 0.14rem;
}
.login .left .dian {
  font-size: 0.14rem;
  color: #b1b1b1;
  margin-bottom: 0.2rem;
}
.login .left ul {
  display: flex;
  flex-direction: row;
}
.login .left ul li {
  width: 0.62rem;
  height: 0.25rem;
  background-color: #63aeff;
  font-size: 0.14rem;
  color: #fff;
  margin-right: 0.15rem;
  border-radius: 0.1rem;
  text-align: center;
  line-height: 0.25rem;
  padding: 0 0.05rem;
}
.jianli {
  margin: 0.4rem 0 0.3rem 0.18rem;
}
.baom {
  display: flex;
  flex-direction: column;
  margin-left: 0.18rem;
  position: relative;
}
.baom .top {
  display: flex;
  margin-bottom: 0.6rem;
}
.baom .top .title {
  position: absolute;
  font-size: 0.2rem;
  z-index: 1;
}
.baom .top span {
  display: block;
  width: 0.8rem;
  height: 0.3rem;
  position: absolute;
  top: 0.15rem;
  background: url(../assets/img/bg1.png) no-repeat;
  background-size: 0.8rem 50%;
}
.baom ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-bottom: 0.4rem;
}
.list li a {
  display: block;
  width: 90%;
  font-size: 14px;
  margin-left: 0.18rem;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid #b1b1b1;
  padding-bottom: 0.15rem;
}
</style>